<template>
  <div>
    <div style="margin:auto;display: flex;background-color: white">
      <div style="display: flex;width: 1200px;height: 200px;margin:15px auto 0 auto;">
        <div style="display: flex;margin: 40px">
          <img :src="`http://localhost:8089/upload/${user.avatar}`"
               style="width: 96px;height: 96px;border-radius: 50%;"/>
          <div>
            <div style="width: 300px;">
              <p style="font-weight: bold;font-size:30px;margin:0 0 0 20px">{{ user.userName }}</p>
              <p style="margin:5px 20px">
                <a v-if="user.identitytypeId===1">学生</a>
                <a v-else-if="user.identitytypeId===2">在职</a>
                <a v-else>其他</a>
              </p>
            </div>
          </div>
          <div
              style="display:flex;margin-left:300px;padding:28px;border-radius: 18px;background-color: #F8F9FB">
            <i class="el-icon-collection" style="font-size: 50px"></i>
            <div style="margin-left: 10px">
              <p style="margin: 0">课程</p>
              <p style="margin: 0">{{ total }} 门</p>
            </div>
          </div>
          <div
              style="display:flex;margin-left:20px;padding:28px;border-radius: 18px;background-color: #F8F9FB">
            <i class="el-icon-edit-outline" style="font-size: 50px"></i>
            <div style="margin-left: 10px">
              <p style="margin: 0">讨论/回复</p>
              <p style="margin: 0">{{ totalDiscuss+totalReply }} 条</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div style="margin:auto;width: 1250px;">
      <div style="display: flex;margin: 20px 0">
        <el-tabs v-model="activeName" @tab-click="handleClick"
                 style="width: 1200px;padding: 30px;background-color: white;border-radius: 12px;">
          <el-tab-pane label="课程" name="first" style="display: flex;flex-direction: column;">
            <el-row>
              <el-col style="width: 238px;height:262px;margin: 10px auto 28px;padding: 10px"
                      v-for="item in courseList" :key="item.courseId"
                      :offset="item.courseId > 0 ? 2 : 0">
                <a @click="on_courseCard(item.courseId)" style="text-decoration: none;cursor:pointer;">
                  <el-card :body-style="{ padding: '0px'}" style="border-radius: 12px">
                    <img :src="`http://localhost:8089/upload/${item.cover}`"
                         class="k-image"/>
                    <div style="height: 126px;padding: 10px 12px;position: relative;">
                      <p style="font-weight: bold;color:#333333;margin: 0">{{ item.courseName }}</p>
                      <p style="color:#666666;margin: 0">{{ item.schoolName }}</p>
                      <p style="color: #999999;margin: 0">{{ item.userName }}</p><!--添加教师团队-->
                      <p style="margin: 40px 0 0;float: right;color: #999999">{{ item.attendNum }}人参加</p>
                    </div>
                  </el-card>
                </a>
              </el-col>
            </el-row>
            <el-empty v-if="courseList.length===0&&!userIsMe" description="这个人很懒，没有参与课程"></el-empty>
            <el-empty v-if="courseList.length===0&&userIsMe" description="你还没有参与课程哦，快去选课吧"></el-empty>
            <el-pagination
                v-if="courseList.length!==0"
                @size-change="handleSizechange"
                @current-change="getPageCourseByAttendUserId"
                :current-page="currentPage"
                :page-sizes="[10,15,20]"
                :page-size="pageSize"
                layout="total,sizes,prev,pager,next,jumper"
                :total="total"
                style="margin-top:20px;text-align: center;">
            </el-pagination>
          </el-tab-pane>
          <el-tab-pane label="讨论/回复" name="second">
            <div>
              <h4>发表的讨论主题</h4>
              <div style="margin:10px 5px;padding:15px;border: 2px solid #999999;border-radius: 14px;"
                   v-for="(item,index) in discussList" :key="index"
                   :offset="index > 0 ? 2 : 0">
                <a @click="onDiscuss(item.courseId,item.discussId)"
                   style="font-size: 20px;margin-top: 0;cursor:pointer">{{ item.discussName }}</a>
                <p style="margin:0;font-size: 15px;color: #999999">
                  <el-link style="font-size: 15px;margin-right: 10px;" :underline="false">{{
                      item.userName
                    }}
                  </el-link>
                  发表于{{
                    item.createTime|formatDate('yyyy-MM-dd HH:mm:ss')
                  }} | 来自
                  <el-link @click="on_courseCard(item.courseId)" style="font-size: 15px;" :underline="false">
                    {{ item.courseName }}
                  </el-link>
                </p>
              </div>
              <el-empty v-if="discussList.length===0&&!userIsMe" description="这个人很懒，没有参与讨论"></el-empty>
              <el-empty v-if="discussList.length===0&&userIsMe" description="你还没有参与讨论哦，快去讨论吧"></el-empty>
              <el-pagination v-if="discussList.length!==0"
                  @size-change="handleSizechangeDiscuss"
                  @current-change="getPageDiscussByUserId"
                  :current-page="currentPageDiscuss"
                  :page-sizes="[5,10,15]"
                  :page-size="pageSizeDiscuss"
                  layout="total,sizes,prev,pager,next,jumper"
                  :total="totalDiscuss"
                  style="margin-top:20px;text-align: center;">
              </el-pagination>
            </div>
            <div>
              <h4>发起的回复</h4>
              <div style="display: flex;flex-direction: column;margin: 30px 0" v-for="(item,index) in discussReplyList"
                   :key="index"
                   :offset="index > 0 ? 2 : 0">
                <p style="margin:0;font-size: 15px;color: #999999">
                  <el-link style="font-size: 15px;margin-right: 10px;" :underline="false">{{
                      item.userName
                    }}
                  </el-link>
                  发表于{{
                    item.createTime|formatDate('yyyy-MM-dd HH:mm:ss')
                  }} | 来自
                  <el-link @click="on_courseCard(item.courseId)" style="font-size: 15px;" :underline="false">
                    {{ item.courseName }}
                  </el-link>
                </p>
                <!--正则去除富文本html标签-->
                <p>{{ item.replyContent.replace(/<\/?.+?\/?>/g, '') }}</p>
                <div style="display: flex;padding:15px;background-color: #F5F5F5;">
                  <div style="width:8px;height:20px;margin-right:10px;background-color: #409EFF;"></div>
                  <el-link @click="onDiscuss(item.courseId,item.discussId)" style="font-size:16px;margin: 0;" :underline="false">{{ item.discussName }}</el-link>
                </div>
              </div>
              <el-empty v-if="discussReplyList.length===0&&!userIsMe" description="这个人很懒，没有回复讨论"></el-empty>
              <el-empty v-if="discussReplyList.length===0&&userIsMe" description="你还没有回复讨论哦，快去回复讨论吧"></el-empty>
              <el-pagination v-if="discussReplyList.length!==0"
                  @size-change="handleSizechangeReply"
                  @current-change="getPageReplyByUserId"
                  :current-page="currentPageReply"
                  :page-sizes="[5,10,15]"
                  :page-size="pageSizeReply"
                  layout="total,sizes,prev,pager,next,jumper"
                  :total="totalReply"
                  style="margin-top:20px;text-align: center;">
              </el-pagination>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "UserHomeView",
  data() {
    return {
      courseId: 1,
      userId: 3,
      user: {},
      userIsMe:true,
      attendFlag: false,
      activeName: 'first',
      course: {},
      discussList: [],
      discussReplyList: [],
      courseList: [],
      currentPage: 1,
      pageSize: 10,
      total: 0,
      currentPageDiscuss: 1,
      pageSizeDiscuss: 5,
      totalDiscuss: 0,
      currentPageReply: 1,
      pageSizeReply: 5,
      totalReply: 0,
    }
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
      if (tab === "first")
        this.getPageCourseByAttendUserId()
    },
    onDiscuss(courseId, discussId) {
      this.$axios({
        method: 'post',
        url: "http://localhost:8089/user/attendCourse/selectAttendCourse",
        data: {"userId": localStorage.getItem('userId'), "courseId": courseId}
      }).then(res => {
        if (res.data.code === 200) {
          this.addDiscussBrowseNum(discussId)
          window.open(this.$router.resolve({path: `/learn/forumindex/${courseId}/${discussId}`}).href, '_blank');
        } else
          window.open(this.$router.resolve({path: `/courseView/${courseId}`}).href, '_blank');
      }).catch(err => console.log(err));
    },
    getUserById(userId) {
      this.$axios({
        method: 'get',
        url: `http://localhost:8089/user/selectUserAllById/${userId}`
      }).then(res => {
        this.user = res.data.dataobject;
      }).catch(err => console.log(err));
    },
    on_courseCard(courseId) {
      console.log(courseId);
      window.open(this.$router.resolve({path: `/courseView/${courseId}`}).href, '_blank');
    },
    handleSizechange(size) {
      this.pageSize = size;
      this.getPageCourseByAttendUserId(1);
    },
    addDiscussBrowseNum(discussId) {
      this.$axios({
        method: 'get',
        url: `http://localhost:8089/discuss/addBrowseNum/${discussId}`
      }).then(res => {
      }).catch(err => console.log(err));
    },
    // 分页查询用户参与的课程
    getPageCourseByAttendUserId(current = 1) {
      this.currentPage = current;
      this.$axios({
        method: 'get',
        url: `http://localhost:8089/attendCourse/getPageCourseByUserId/${this.currentPage}/${this.pageSize}/${this.userId}`,
      }).then(res => {
        this.total = res.data.dataobject.total;
        this.courseList = res.data.dataobject.pageList;
      }).catch(err => console.log(err));
    },
    handleSizechangeDiscuss(size){
      this.pageSizeDiscuss = size;
      this.getPageDiscussByUserId(1);
    },
    // 分页查询讨论
    getPageDiscussByUserId(current = 1){
      this.currentPageDiscuss=current;
      this.$axios({
        method: 'get',
        url: `http://localhost:8089/course/getPageByUserId/${this.currentPageDiscuss}/${this.pageSizeDiscuss}/${this.userId}`,
      }).then(res => {
        this.totalDiscuss = res.data.dataobject.total;
        this.discussList = res.data.dataobject.pageList;
      }).catch(err => console.log(err));
    },
    handleSizechangeReply(size){
      this.pageSizeReply = size;
      this.getPageDiscussByUserId(1);
    },
    // 分页查询讨论回复
    getPageReplyByUserId(current = 1){
      this.currentPageReply=current;
      this.$axios({
        method: 'get',
        url: `http://localhost:8089/discussreply/getPageByUserId/${this.currentPageReply}/${this.pageSizeReply}/${this.userId}`,
      }).then(res => {
        this.totalReply = res.data.dataobject.total;
        this.discussReplyList = res.data.dataobject.pageList;
      }).catch(err => console.log(err));
    }
  },
  filters:{
    formatDate: function(value,args) {
      var dt = new Date(value);
      if(args == 'yyyy年MM月dd日') {// yyyy年MM月dd日
        let year = dt.getFullYear();
        let month = (dt.getMonth() + 1).toString().padStart(2,'0');
        let date = dt.getDate().toString().padStart(2,'0');
        return `${year}年${month}月${date}日`;
      } else if(args == 'yyyy-MM-dd HH:mm:ss'){// yyyy-MM-dd HH:mm:ss
        let year = dt.getFullYear();
        let month = (dt.getMonth() + 1).toString().padStart(2,'0');
        let date = dt.getDate().toString().padStart(2,'0');
        let hour = dt.getHours().toString().padStart(2,'0');
        let minute = dt.getMinutes().toString().padStart(2,'0');
        let second = dt.getSeconds().toString().padStart(2,'0');
        return `${year}-${month}-${date} ${hour}:${minute}:${second}`;
      }
    }
  },
  created() {
    if(this.$route.params.userId!==''&&this.$route.params.userId){
      this.userId = this.$route.params.userId
      this.userIsMe=false
    }else
      this.userId = localStorage.getItem('userId')
    this.getUserById(this.userId)
    this.getPageDiscussByUserId()
    this.getPageReplyByUserId()
    this.getPageCourseByAttendUserId()
  },

}
</script>

<style scoped>
@import "../css/course.css";

/deep/ .el-tabs__item {
  font-size: 18px !important;
}

/deep/ .el-rate__icon {
  font-size: 30px;
}

.rete /deep/ .el-rate__icon {
  font-size: 20px;
  margin-right: 0;
}
</style>